Add some use-case helper utilities #2
Conversation
First off, great work on apca, and congrats on publishing it to npm! It's the only algorithm I've used that properly identifies perceived contrast. There isn't an issue tracker on this repo, so I figured I'd go with this; it probably won't compile, but hopefully it gets the point across. -- My main use case for this library is determining whether I should use a light or dark color for the foreground text on a background that has a certain color (``testColor`` in the PR code). I'd love to see a helper util similar to this make it in to the library so that people that have this same use case can easily swap apca into their current workflow.
There was a problem hiding this comment.
Hey @kavdev Thank you for the contribution!
Yea I have the issues turned off here as the main repo for discussion is Myndex/SAPC-APCA#30
Something else you might also like, I wrote an article on "when to flip dark to light" and also have an associated codePen that demonstrates the concepts, including when to increase the fonst size in the mid range.
Here's a link: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#lets-flip-for-color
As for your idea, I'm thinking a utilities folder is probably in order....
Thank you again!!
Users can now specify values for light and dark text for a more accurate contrast check. Co-authored-by: James Harris <[email protected]>
Ah, gotcha. I figured a separate discussion project might be the case. Could you add that to the readme of this project?
This is awesome! I'll try this out at some point. |
|
Sorry it has taken so long to get to this PR, I've just had way too much on my plate... I have a question, I'm a litle confused by the return statement, it's returning the luminance Y of the test color? And for the APCAcontrast(), it requires two parameters, text then background, and these can not be flipped. What were you thinking it should return? because I'd think it should return the chosen color value...? |
It's returning a boolean. True if dark foreground text on the test color background has a higher contrast score, False if light foreground text on the test color background has a higher contrast score. This obviously ignores font size and probably some other things that go into a proper contrast test, but it's a great approximation and works much better than the other solutions out there that don't use apca. This was just a sample util that solves a use case. I'm fully open to improving the util or making it more generic. In prod, we use the boolean to determine which css variable to inject instead of supplying color options directly. |
Hi @kavdev Got it, I'm thinking of turning the repo Fancy Font Flipping into an independent utility, though I can see the usefulness of having some utilities like that aspart of this library, too. Expect some changes and additions in the coming months... |
First off, great work on apca, and congrats on publishing it to npm! It's the only algorithm I've used that properly identifies perceived contrast.
There isn't an issue tracker on this repo, so I figured I'd go with this; it probably won't compile, but hopefully it gets the point across.
--
My main use case for this library is determining whether I should use a light or dark color for the foreground text on a background that has a certain color (
testColorin the PR code). I'd love to see a helper util similar to this make it in to the library so that people that have this same use case can easily swap apca into their current workflow.